<template>
  <m-layout class="score-classess">
    <mt-header slot="header" title="选择上课班级">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <div class="date-wrapper">
        <m-calendar-range v-model="searchDate" @change="handleSearchDateChange"/>
      </div>
      <m-section :border-bottom="false">
        <e-heading>上课班级</e-heading>
        <div class="content-wrapper"
          v-if="classess.list.length"
          v-infinite-scroll="handleLoadMore"
          infinite-scroll-disabled="classess.loading"
          infinite-scroll-distance="50"
          infinite-scroll-immediate-check="false"
          >
          <!-- 课程容器 -->
          <mt-cell v-for="item in classess.list" :key="item.classId" is-link :to="{path: '/score/select/student', query: Object.assign({}, query, {classId: item.classId})}">
            <div slot="title" class="class-info">
              <span class="class-info--title">{{item.className}}</span>
              <!-- properties 0：专业课，1：综合科，2：次课 -->
              <m-tag plain :type="['warning', 'link', 'success'][item.properties]">{{['专', '综', '次'][item.properties]}}</m-tag>
            </div>
          </mt-cell>
        </div>
        <e-placeholder v-else />
      </m-section>
      <div class="page-infinite-loading" >
        <template v-if="!classess.loading">
          <mt-spinner type="fading-circle" :size="22"></mt-spinner>
          加载中...
        </template>
        <template v-else-if="classess.list.length">
          没有更多数据了
        </template>
      </div>
    </div>
  </m-layout>
</template>
<script>
import { mapState } from 'vuex'
import MCalendarRange from '@/views/components/CalendarRange'
export default {
  components: {
    MCalendarRange
  },
  data () {
    return {
      searchDate: []
    }
  },
  computed: {
    ...mapState({
      classess: state => state.score.classess
    }),
    query () {
      return this.$route.query
    }
  },
  created () {
    this.initData()
  },
  beforeRouteLeave ({path}, from, next) {
    if (path === '/score') {
      // 清空数据
      this.$store.commit('score/EMPTY', {key: 'classess'})
    }
    next()
  },
  methods: {
    initData () {
      let week = []
      let query = this.query
      if (!this.$first && query.endDate && query.beginDate) {
        // 路由数据获取
        week = [new Date(query.beginDate), new Date(query.endDate)]
        this.$first = true
      } else {
        // 默认时间
        let now = new Date()
        let day = now.getDay()
        week = [new Date(now.getTime() - 86400000 * (day - 1)), new Date(now.getTime() + 86400000 * (7 - day))]
      }
      this.searchDate = week
      if (!this.classess.list.length) {
        this.handleSearchDateChange()
      }
    },
    getClassess (options = {}) {
      let query = this.query
      let [beginDate, endDate] = this.searchDate
      let subData = Object.assign({}, {
        orgUserId: query.orgUserId,
        testItemId: query.testItemId,
        beginDate: beginDate.format('yyyy-MM-dd'), // 默认 yyyy-MM-dd
        endDate: endDate.format('yyyy-MM-dd'),
        page: 1, // 默认
        rows: 10 // 默认
      }, options)
      this.$store.dispatch('score/classess', subData)
    },
    handleLoadMore () {
      this.$page++
      this.getClassess({
        page: this.$page
      })
    },
    handleSearchDateChange () {
      // 触发日期变更 都默认拿第一页
      this.$page = 1
      this.getClassess({
        page: this.$page, // 默认
        rows: 10 // 默认
      })
      let [beginDate, endDate] = this.searchDate
      let newQuery = {
        endDate: endDate.format('yyyy-MM-dd'),
        beginDate: beginDate.format('yyyy-MM-dd')
      }
      this.handleChangeRouter(newQuery)
    },
    handleChangeRouter (options) {
      let {name, query} = this.$route
      this.$router.replace({
        name,
        query: Object.assign({}, query, options)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .score{
    &-classess{
      .date-wrapper{
        background-color: #fff;
        height: 0.88rem;
        text-align: center;
      }
    }
  }
</style>
<style lang="scss">
  .score{
    &-classess{
      .content-wrapper{
        .mint-cell {
          &-wrapper{
            .class-info{
              display: flex;
              align-items: center;
              &--title{
                max-width: 5.8rem;
                margin-right: .2rem;
                font-size: .32rem;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap
              }
            }
          }
        }
      }
      .page-infinite-loading{
        margin-top: .2rem;
        text-align: center;
        div{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>
